import { StyleSheet, ScrollView, Pressable, Image } from 'react-native';
import { Text, View } from '@/components/Themed';
import { router } from 'expo-router';
import { FontAwesome } from '@expo/vector-icons';

export default function ProfileScreen() {
  const userInfo = {
    avatar: 'https://picsum.photos/100/100',
    nickname: '用户昵称',
    description: '这是个人简介',
  };

  const menuItems = [
    { id: 1, title: '我的收藏', icon: 'star', route: '/bookmarks' },
    { id: 2, title: '阅读历史', icon: 'history', route: '/history' },
    { id: 3, title: '消息通知', icon: 'bell', route: '/notifications' },
    { id: 4, title: '系统设置', icon: 'cog', route: '/settings' },
  ];

  const MenuItem = ({ title, icon, onPress }: { title: string; icon: string; onPress: () => void }) => (
    <Pressable style={styles.menuItem} onPress={onPress}>
      <View style={styles.menuContent}>
        <FontAwesome name={icon as any} size={20} color="#666" />
        <Text style={styles.menuText}>{title}</Text>
      </View>
      <FontAwesome name="angle-right" size={20} color="#666" />
    </Pressable>
  );

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Image source={{ uri: userInfo.avatar }} style={styles.avatar} />
        <View style={styles.userInfo}>
          <Text style={styles.nickname}>{userInfo.nickname}</Text>
          <Text style={styles.description}>{userInfo.description}</Text>
        </View>
      </View>

      <View style={styles.menuContainer}>
        {menuItems.map((item) => (
          <MenuItem key={item.id} title={item.title} icon={item.icon} onPress={() => router.push(item.route as any)} />
        ))}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#fff',
    padding: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
  },
  userInfo: {
    marginLeft: 20,
    backgroundColor: 'transparent',
  },
  nickname: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  description: {
    fontSize: 14,
    color: '#666',
  },
  menuContainer: {
    marginTop: 10,
    backgroundColor: '#fff',
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  menuContent: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  menuText: {
    fontSize: 16,
    marginLeft: 15,
  },
});
